<template>
    <div class="parent">
        <header class="header">
            <x-header class="headerContent" :left-options="{showBack: false}"><span class="toptitle">发现</span></x-header>
        </header>
        <div class="main">
            <div class="swiper">
                <!-- <swiper :show-dots="show_dots">
                    <swiper-item class="swiper-demo-img" v-for="(item, index) in demo04_list" :key="index"><img class="img" :src="item"></swiper-item>
                </swiper> -->
                <img class="img" src="http://pic-cdn.35pic.com/58pic/19/59/11/80E58PICMv4_1024.jpg" alt="">
            </div>
            <div class="group">
                <group class="groupTitle">
                    <cell class="cell" link="/Find/Weather">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-tianqi-"></span>
                            </div>
                            <div class="right">
                                <span class="title">天气预报</span>
                                <span class="desc">为您提供最精准的天气状况</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Find/Dot">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-weixiuwangdian"></span>
                            </div>
                            <div class="right">
                                <span class="title">网点查询</span>
                                <span class="desc">为你提供最精准得网点查询</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Find/Notice">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-gonggao"></span>
                            </div>
                            <div class="right">
                                <span class="title">公告</span>
                                <span class="desc">广而告之</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Find/Policy">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-faguizhengce"></span>
                            </div>
                            <div class="right">
                                <span class="title">政策法规</span>
                            </div>
                        </div>
                    </cell>
                    <cell class="cell" link="/Find/Knowledge">
                        <div class="cont">
                            <div class="left">
                                <span slot="icon" class="icon iconfont icon-gongreshouce"></span>
                            </div>
                            <div class="right">
                                <span class="title">用热知识</span>
                            </div>
                        </div>
                    </cell>
                </group>
            </div>
        </div>
        <Tabs></Tabs>
    </div>
</template>
<script>
import { XHeader, Group, Cell, Swiper, SwiperItem } from 'vux'
import Tabs from '../components/tabBar'
export default {
    name: 'Find',
    components: {
        XHeader,
        Group, 
        Cell,
        Swiper,
        SwiperItem,
        Tabs
    },
    data () {
        return {
            show_dots: false,
            demo04_list: [
                'http://pic-cdn.35pic.com/58pic/19/59/11/80E58PICMv4_1024.jpg'
            ]
        }
    },
    created () {
        //  this.$axios.get('http://192.168.1.141:8180/IntelligentHeating/services'+ '/systemset/getArticleList',{
        //     params: {
        //         articleTypeID:'0505',
        //         articleTitle:'',
        //         isHotShow: 0,
        //         isBannerShow: 0
        //     }
        // }).then(res => {
        //     console.log(res.data)
        // })
    },
    methods: {
        
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background:rgba(250,250,250,1);
}
.header{
    width: 100%;
    height: 1.333333rem;
}
.toptitle{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    height: 100%;
    background:linear-gradient(127deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
}
.swiper{
    width: 100%;
    height: 4.906667rem;
    .img{
        display: block;
        width: 100%;
        height: 100%;
    }
}
.group{
    width: 100%;
    margin-top: -0.233333rem;
    .groupTitle{
        width: 100%;
    }
}

.cell{
    width: 100%;
    height:1.333333rem;
    .cont{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .left{
            width: 1rem;
            height: 1rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .icon{
                font-size: 24px;
                color: rgba(255,199,38,1);
            }
        }
        .right{
            width: 7.55rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .title{
                font-size:14px;
                font-family:ArialMT;
                color:rgba(82,82,82,1);
                line-height:16px;
                letter-spacing:1px;
            }
            .desc{
                font-size:12px;
                font-family:ArialMT;
                color:rgba(204,204,204,1);
                line-height:15px;
                letter-spacing:1px;
                padding-top: .106667rem;
            }
        }
    }
}

</style>
